<template>
  <div class="purchase">
    <div class="productDiv">
      <div class="pd_left">
        <label class="pdl_title">产品：</label>
        <label class="pdl_name">{{proTitle}}</label>
        <el-popover
          placement="bottom"
          trigger="click">
          <ul class="pro_item">
            <li @click="changePro(p)" v-for="p in productList" style="list-style: none">{{p}}</li>
          </ul>
          <el-button slot="reference" class="pro_change">切换</el-button>
        </el-popover>
      </div>
      <div class="pd_right">
        <el-date-picker
          v-model="monthDate"
          type="month"
          @change="changeDate"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
    <div class="content">
      <div class="ctr_box" v-for="(outPoint,ind) in item" @click="toPpm(outPoint)">
        <span class="title">{{outPoint.name}}</span>
        <div class="ctr_progress">
          <el-progress type="circle" :percentage="parseFloat(outPoint.value)" :stroke-width="8" color="#ff5744" v-if="outPoint.yty >0 && outPoint.up == 0"></el-progress>
          <el-progress type="circle" :percentage="parseFloat(outPoint.value)" :stroke-width="8" color="#ff5744" v-if="outPoint.yty < 0 && outPoint.up == 1"></el-progress>
          <el-progress type="circle" :percentage="parseFloat(outPoint.value)" :stroke-width="8" color="#63bc4a" v-if="outPoint.yty > 0 && outPoint.up == 1"></el-progress>
          <el-progress type="circle" :percentage="parseFloat(outPoint.value)" :stroke-width="8" color="#63bc4a" v-if="outPoint.yty < 0 && outPoint.up == 0"></el-progress>
          <el-progress type="circle" :percentage="parseFloat(outPoint.value)" color="#3384dd" :stroke-width="8" v-if="outPoint.yty == 0"></el-progress>
          <el-progress type="circle" :percentage="parseFloat(outPoint.value)" color="#fff" :stroke-width="8" v-if="outPoint.yty > 30 && outPoint.up == 0"></el-progress>
        </div>
        <div class="dec">
          <i :class="[{'sky-icon-nordown':outPoint.yty>0 && outPoint.up==1},
              {'sky-icon-impup':outPoint.yty>0 && outPoint.up==0},
              {'sky-icon-lessdown':outPoint.yty<0 && outPoint.up==0},
              {'sky-icon-impdown':outPoint.yty<0 && outPoint.up==1},
              {'sky-icon-standard':outPoint.yty==0},
              {'sky-icon-whitedown':outPoint.yty>30 && outPoint.up==0}]"></i>
          {{outPoint.yty}}% 同比标准
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  import qs from 'qs'
  export default {
    name: "purchase",
    data() {
      return {
        monthDate:new Date(),
        productList: [],
        proTitle: '',
        item: [],
        parType: '',
      }
    },
    watch:{
      $route(){
        this.parType = this.$route.query.type
        this.getDic()
      }
    },
    created() {
      let self = this
      self.parType = self.$route.query.type
      self.getDic()
    },
    mounted() {
    },
    methods: {
      ...mapActions(['upstate']),
      //获取产品列表
      getDic(){
        let self = this
        self.$http.get(self.conURL + 'mongo/api/docs/dictitem/product').then(res => {
          for(let i = 0;i < res.data.length;i++){
            self.productList.push(res.data[i]);
          }
          if (self.proTitle == ''){
            self.proTitle = res.data[0]
            self.upstate({key:'protitle',val:res.data[0]})
          }
          self.getDetail()
        })
      },
      //切换产品
      changePro(item){
        let self = this
        self.proTitle = item;
        self.upstate({key:'protitle',val:item})
        self.getDetail();
      },
      //切换时间
      changeDate(par){
        let self = this
        self.monthDate = par
        self.getDetail()
      },
      //获取数据
      getDetail(){
        let self = this
        let parDate = ''
        let date = new Date(self.monthDate);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
        parDate = Y + M;
        let par = {
          month: parDate,
          type: self.parType,
          item: self.proTitle
        }
        self.$http.get(self.conURL + 'pm/api/targets?' + qs.stringify(par)).then(res => {
          self.item = res.data
        })
      },
      //前往ppm详情
      toPpm(par){
        let self = this
        let parDate = ''
        let date = new Date(self.monthDate);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
        parDate = Y + M;
        self.$router.push({
          path:'/index/quert',
          query: {
            item: par.target,
            name: par.name,
            time: parDate,
          }
        })
      },
    }
  }
</script>

<style lang="less">
  .purchase{
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    box-sizing: border-box;
    .productDiv{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: 140px;
      .pd_left{
        display: flex;
        flex-direction: row;
        span{
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .pdl_title{
          color: #848484;
          line-height: 140px;
          font-size: 28px;
        }
        .pdl_name{
          color: #3b3b3b;
          line-height: 140px;
          font-size: 28px;
          margin-right: 20px;
        }
        .pro_change{
          width: 54px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          font-size: 14px;
          color: #ffffff;
          background: #3384dd;
          border-radius: 50px;
          padding: 0;
          margin-top: auto;
          margin-bottom: auto;
        }
      }
      .pd_right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-input__inner{
          padding-left: 20px;
          background-color: #e5e5e5;
          color: #636363;
          border-radius: 30px;
          border: 0px;
          font-size: 18px;
        }
      }
    }
    .content{
      display: flex;
      flex-direction: row;
      .ctr_box{
        width: 24%;
        padding: 25px;
        padding-bottom: 0;
        box-sizing: border-box;
        margin-right: 2%;
        margin-bottom: 20px;
        background: #fff;
        border-radius: 5px;
        border: 1px solid #eeeeee;
        display: flex;
        flex-direction: column;
        box-shadow: #f8f8f9 0px 0px 15px;
        cursor: pointer;
        .title{
          font-size: 22px;
          color: #666666;
        }
        .ctr_progress{
          width: 110px;
          height: 110px;
          margin-top: 10px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin-left: auto;
          margin-right: auto;
          .el-progress-circle{
            width: 110px !important;
            height: 110px !important;
          }
          .ctrp_text{
            color: #222222;
            font-size: 32px;
            margin: auto;
          }
        }
        .dec{
          margin-top: 10px;
          text-align: center;
          color: #999;
          font-size: 16px;
          [class^="sky-icon"]{
            width: 30px;
            height: 30px;
            background: url(../../../assets/imgs/1-2.png) no-repeat;
            display: inline-block;
            vertical-align: middle;
            margin: 0px 3px 0px;
          }
          .sky-icon-standard{
            background-position: -61px -239px;
            width: 20px;
          }
          .sky-icon-impdown{
            background-position: -63px -62px;
            width: 15px;
          }
          .sky-icon-whitedown{
            background-position: -63px -101px;
            width: 15px;
          }
          .sky-icon-lessdown{
            background-position: -63px -144px;
            width: 15px;
          }
          .sky-icon-impup{
            background-position: -111px -192px;
            width: 15px;
          }
        }
      }
    }
  }
</style>
